<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap5/css/bootstrap.min.css">
    <link rel="stylesheet/less" href="./css/common.less"> <!--公共样式 -->
    <link rel="stylesheet/less" href="./css/index.less"><!--独立样式-->
    <title>落地页</title>
</head>

<body>
    <header>
        <div class="container">
            <nav class="navbar navbar-expand-lg">
                <div class="container-fluid">
                    <a class="navbar-brand logoNav" href="#">
                        <img src="./img/Logo_index.png" alt="Logo" class="d-inline-block align-text-top">
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                        <a class="navbar-brand" href="#">
                            <img src="./img/Logo_index.png" alt="Logo" class="d-inline-block align-text-top">
                        </a>
                        <div class="navbar-nav">
                            <a class="nav-link" href="./index.html">落地页</a>
                            <a class="nav-link" href="./project.html">项目文件</a>
                            <a class="nav-link" href="./blog.html">博客</a>
                            <a class="nav-link" href="./service.html">我们的服务</a>
                            <a class="nav-link" href="./about.html">关于我们</a>
                        </div>
                        <div class="navbar-nav loginNav">
                            <a class="nav-link " id="login" href="./login.html">登录</a>
                            <a class="nav-link " id="register" href="./register.html">注册</a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <div class="banner">
        <img src="./img/banner1.png" class="w-100 h-100" alt="">
        <div class="container">
            <div class="row">
                <div class="home_text col-sm-5">
                    <h1 class="d-lg-block d-none">标题示例最多显示三行全球数字资产行情数据应用领跑者</h1>
                    <h6 class="d-sm-block d-none">副标题文字示例是最赚的数字资产行情、咨询、导航平台之一，拥有最全面而有之的数字资产资源，接力为用户提供实时行情。</h6>
                    <div class="d-sm-block d-none banner_btn">开始免费试用→</div>
                </div>
            </div>
        </div>
    </div>
    <div class="module1">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6 mb-4 mb-md-0 mx-auto text-center item">
                    <span class="num">28K</span>
                    <span class="title">用户人数</span>
                </div>
                <div class="col-md-3 col-sm-6 mb-4 mb-md-0 mx-auto text-center item">
                    <span class="num">13K</span>
                    <span class="title">实时下载</span>
                </div>
                <div class="col-md-3 col-sm-6 mb-4 mb-md-0 mx-auto text-center item">
                    <span class="num">68K</span>
                    <span class="title">用户收藏</span>
                </div>
                <div class="col-md-3 col-sm-6 mb-4 mb-md-0 mx-auto text-center item">
                    <span class="num">10K</span>
                    <span class="title">五星好评</span>
                </div>
            </div>
            <div class="row content2">
                <div class="col-lg-6 left_item">
                    <div class="left">
                        <div class="content2_item">
                            <img src="./img/home_m1_1.png" alt="">
                            <h6>标题文字示例</h6>
                            <p>特点一辅助信息文字示例，最多显示三行互联网人心中共同的粘度用户中心效率。</p>
                        </div>
                        <div class="content2_item">
                            <img src="./img/home_m1_2.png" alt="">
                            <h6>教育问答</h6>
                            <p>特点一辅助信息文字示例，最多显示三行互联网人心中共同的粘度用户中心效率。</p>
                        </div>
                    </div>
                    <div class="right">
                        <div class="content2_item">
                            <img src="./img/home_m1_3.png" alt="">
                            <h6>下载课程</h6>
                            <p>特点一辅助信息文字示例，最多显示三行互联网人心中共同的粘度用户中心效率。</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 right_item">
                    <span class="info text-center text-lg-start">关于金金素材铺</span>
                    <h1 class="text-center text-lg-start">关于我们标题示例显示三行，我们使用更好的算法和数据跟踪您的日常开支。</h1>
                    <p class="text-center text-lg-start pe-lg-5">
                        辅助信息文字示例三行显示，当我们回顾2020，我们看到了什么？在一探究竟的执拗中挑战科学极限。辅助信息文字示例两行显示，当我们回顾2020，我们看到了什么？</p>
                    <div class="begin_btn mx-auto mx-lg-0">现在开始</div>
                </div>
            </div>
        </div>
    </div>
    <div class="module2">
        <div class="row">
            <div class="col-md-5 col-sm-8 col-10 mx-auto mx-md-0 ms-md-auto left">
                <h6 class="info text-center text-md-start">为什么选择我们</h6>
                <h1 class="text-center text-md-start">开始使用我们的软件，比任何事情都容易。</h1>
                <p class="text-center text-md-start pe-lg-5">
                    辅助信息文字示例两行显示，当我们回顾2020，我们看到了什么？在一探究竟的执拗中挑战科学极限。
                </p>
                <div class="items">
                    <div class="item">
                        <div class="left">1</div>
                        <div class="middle">
                            <span class="title">650 多种不同类型的课程</span>
                            <!-- <span class="info">这里有许多独特的模块，您可以轻松地创建一个页面，而无需使用应用软件进行编码。</span> -->
                        </div>
                        <div class="right">&gt;</div>
                    </div>
                    <div class="item">
                        <div class="left">2</div>
                        <div class="middle">
                            <span class="title">2800+ 来自世界各地的学生</span>
                            <!-- <span class="info">这里有许多独特的模块，您可以轻松地创建一个页面，而无需使用应用软件进行编码。</span> -->
                        </div>
                        <div class="right">&gt;</div>
                    </div>
                    <div class="item">
                        <div class="left">3</div>
                        <div class="middle">
                            <span class="title">由 600 多名经验丰富的教师授课</span>
                            <!-- <span class="info">这里有许多独特的模块，您可以轻松地创建一个页面，而无需使用应用软件进行编码。</span> -->
                        </div>
                        <div class="right">&gt;</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-8 col-10 d-flex mx-auto align-items-center">
                <img src="./img/home_m2_1.png" class="w-100" alt="">
            </div>
        </div>
        <div class="row pic">
            <img src="./img/home_m2_2.png" class="w-100" alt="">
        </div>
    </div>
    <div class="module3">
        <div class="row">
            <div class="title col-10 col-md-6 mx-auto">
                <h6 class="info text-center">查看内部应用程序</h6>
                <h1 class="text-center">快来使用我们的产品开始您的学习之旅吧</h1>
                <p class="text-center">
                    在一探究竟的执拗中挑战科学极限，以寸步不让的果敢打造科技力量，用天马星空创造共享，纯真是初心。
                </p>
            </div>
            <div id="carouselExampleIndicators" class="carousel slide  col-12 mx-auto" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
                        aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                        aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                        class="active" aria-current="true" aria-label="Slide 3"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
                        aria-label="Slide 4"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
                        aria-label="Slide 5"></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item ">
                        <img src="./img/home_m3_1.png" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./img/home_m3_1.png" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item active">
                        <img src="./img/home_m3_1.png" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./img/home_m3_1.png" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <img src="./img/home_m3_1.png" class="d-block w-100" alt="...">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-7 col-10 mx-auto mb-5 mb-lg-0 d-flex align-items-center">
                    <img src="./img/home_m3_2.png" class="w-100" alt="">
                </div>
                <div class="col-lg-5 col-10 mx-auto right">
                    <span class="info text-center text-lg-start">学什么</span>
                    <h1 class="text-center text-lg-start">您可以使用我们的应用程序快速轻松地学习。</h1>
                    <p class="text-center text-lg-start pe-lg-5">
                        领导一个组织是令人难以置信的回报，而且也同样令人谦卑。 自信和谦逊。 每一次成功都是建立在从错误中吸取教训的基础上的，都是令人难以置信的回报，同样令人谦卑。 它需要健康。</p>
                    <div class="begin_btn mx-auto mx-lg-0">现在开始</div>
                </div>
            </div>
        </div>
    </div>
    <div class="module4">
        <div class="row">
            <div class="title col-10 col-md-6 mx-auto">
                <h6 class="info text-center">特色课程</h6>
                <h1 class="text-center">特色课程标题文字示例展示两行，探索我们的最新特色课程</h1>
                <p class="text-center">
                    领导一个组织是令人难以置信的回报，而且也同样令人谦卑。 自信和谦逊。 每一次成功都难以置信。
                </p>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-xl-3 col-md-6 col-10 mx-auto mb-4 mb-xl-0">
                    <div class="item">
                        <img src="./img/home_m4_1.png" class="bigpic w-100" alt="">
                        <div class="info">
                            <div class="subject">科学</div>
                            <p>除了自然之外，还有三个主要的科学分支。这里是课程的简单介绍示例。</p>
                            <img src="./img/home_m4_stars.png" class="stars" alt="">
                            <div class="bottom">
                                <span class="price">￥89.99</span>
                                <div class="price_">￥180.00</div>
                                <div class="b_btn">立即报名</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 col-10 mx-auto mb-4 mb-xl-0">
                    <div class="item item2">
                        <img src="./img/home_m4_2.png" class="w-100" alt="">
                        <div class="info">
                            <div class="subject">生物</div>
                            <p>生命和生物的生物学研究，生物因素。这里是课程的简单的文字介绍示例。</p>
                            <img src="./img/home_m4_stars.png" class="stars" alt="">
                            <div class="bottom">
                                <span class="price">￥89.99</span>
                                <div class="price_">￥180.00</div>
                                <div class="b_btn">立即报名</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 col-10 mx-auto mb-4 mb-xl-0">
                    <div class="item item3">
                        <img src="./img/home_m4_3.png" class=" w-100" alt="">
                        <div class="info">
                            <div class="subject">数学</div>
                            <p>数学是美国和加拿大的首选术语。这里是课程的简单的文字介绍示例，可显示三行。</p>
                            <img src="./img/home_m4_stars.png" class="stars" alt="">
                            <div class="bottom">
                                <span class="price">￥89.99</span>
                                <div class="price_">￥180.00</div>
                                <div class="b_btn">立即报名</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 col-10 mx-auto mb-4 mb-xl-0">
                    <div class="item item4">
                        <img src="./img/home_m4_4.png" class="w-100" alt="">
                        <div class="info">
                            <div class="subject">英语</div>
                            <p>英语是最早使用的也是最多国家使用的语言。这里是课程的简单的文字介绍信息。</p>
                            <img src="./img/home_m4_stars.png" class="stars" alt="">
                            <div class="bottom">
                                <span class="price">￥89.99</span>
                                <div class="price_">￥180.00</div>
                                <div class="b_btn">立即报名</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="module5">
        <div class="row">
            <div class="title col-10 col-md-6 mx-auto">
                <h6 class="info text-center">用户都在说</h6>
                <h1 class="text-center">我们的学生对应用都有哪些评价，这里是主标题示例显示两行</h1>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-10 mx-auto">
                    <img src="./img/home_m5_1.png" class="w-100" alt="">
                </div>
                <div class="col-lg-6 col-10 mx-auto right d-flex align-items-center">
                    <div id="carouselExampleIndicators2" class="carousel slide">
                        <div class="carousel-indicators">
                            <button type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="0"
                                class="active" aria-current="true" aria-label="Slide 1"></button>
                            <button type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="1"
                                aria-label="Slide 2"></button>
                            <button type="button" data-bs-target="#carouselExampleIndicators2" data-bs-slide-to="2"
                                aria-label="Slide 3"></button>
                        </div>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <!-- <img src="./img/home_m5_2.png" class="d-block w-100" alt="..."> -->
                                <div class="info">
                                    <p>每一次成功都是建立在从这错误中吸取教训的基础上的，都是令人难以置信的回报。每一次成功都是建立在从这错误中吸取教训的基础上的。</p>
                                    <div class="head">
                                        <img src="./img/home_m5_3.png" alt="">
                                        <div class="text">
                                            <h6>金金小张</h6>
                                            <span>Web开发工程师</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="info">
                                    <p>每一次成功都是建立在从这错误中吸取教训的基础上的，都是令人难以置信的回报。每一次成功都是建立在从这错误中吸取教训的基础上的。</p>
                                    <div class="head">
                                        <img src="./img/home_m5_3.png" alt="">
                                        <div class="text">
                                            <h6>金金小张</h6>
                                            <span>Web开发工程师</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="info">
                                    <p>每一次成功都是建立在从这错误中吸取教训的基础上的，都是令人难以置信的回报。每一次成功都是建立在从这错误中吸取教训的基础上的。</p>
                                    <div class="head">
                                        <img src="./img/home_m5_3.png" alt="">
                                        <div class="text">
                                            <h6>金金小张</h6>
                                            <span>Web开发工程师</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators2"
                            data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators2"
                            data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="row input_email">
                <div class="text col-8 mx-auto">
                    <h1>您希望我们通过电子邮件向您发送有关特别优惠和更新的信息？</h1>
                    <div class="inp col-lg-8 col-12">
                        <input type="email" placeholder="输入您的Email">
                        <div class="e_btn"><span>现在订阅</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-sm-6 col-10 mx-auto text-center text-sm-start mb-4 mb-lg-0 left">
                    <img src="./img/Logo_index.png" alt="">
                    <p>公司信息文字示例最多显示显示，当我们回顾2020，我们看到了什么？在一探究竟的执拗中挑战科学极限，以寸步不让的果敢打造科技力量，用天马星空创造共享。</p>
                    <img src="./img/footer1.png" alt="">
                </div>
                <div class="col-lg-2 col-sm-6 col-10 mx-auto text-center text-sm-start  mb-4  mb-lg-0">
                    <div class="title">服务</div>
                    <div class="item">文字示例信息</div>
                    <div class="item">安全托管</div>
                    <div class="item">检查网站网址</div>
                    <div class="item">安全密码设置</div>
                </div>
                <div class="col-lg-2 col-sm-6 col-10 mx-auto text-center text-sm-start mb-4 mb-lg-0">
                    <div class="title">关于我们</div>
                    <div class="item">付款计划</div>
                    <div class="item">让储蓄更多</div>
                    <div class="item">税收计算器</div>
                    <div class="item">关于我们</div>
                </div>
                <div class="col-lg-3 col-sm-6 col-10 mx-auto text-center text-sm-start mb-4 mb-lg-0">
                    <div class="title">联系我们</div>
                    <div class="item">地址示例最多显示两行可折行北京市海淀区中关村</div>
                    <div class="item">电话：010-57500000</div>
                    <div class="pic">
                        <img src="./img/footer2.png" alt="">
                        <img src="./img/footer3.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="end">
            © 2021 copyright All Rights Reserved.demo
        </div>
    </footer>
    <script src="./js/less-4.1.3.js"></script>
    <script src="./bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>